@import '../colors'

.divider
	margin-left 16px

.list > :last-child
	margin-bottom 72px

.list-item
	padding 0 16px
	position relative
	color #4D4D4E
	height 72px
	line-height 72px
	font-weight 400
	&.clickable
		cursor pointer
	&.with-divider:after
		content ''
		position absolute
		bottom 0
		right 0
		height 1px
		left 72px
		background divider
	&.active
		background rgba(0,0,0,0.05)
	&.disabled, &.disabled > :first-child > i
		color divider

	&.list-item-with-secondary-action > *
		right 56px

	.material-icons
		color primary-text

	> *
		position absolute
		top 0
		bottom 0
		left 0
		right 0
		display flex
		align-items center
		> *
			line-height normal

	.secondary
		color secondary-text
		font-weight 300

	> :first-child
		left 16px
		> .circle
			height 45px
			width 45px
			background-color rgba(0,0,0,0.3)
		> i
			font-size 24px
			color rgba(0,0,0,0.54)

	> :nth-child(2)
		left 72px !important
		right 72px

	> :last-child
		right 16px
		left auto

	> .secondary-action
		left auto
		width 40px


.list-heading
	padding 0 16px
	height 32px
	line-height 32px
	font-size 12px
	color #999999

.collection .collection-item
	border 0
	&:after
		content ''
		position absolute
		bottom 0
		right 0
		height 1px
		left 72px
		background divider
